<style>
	.sidebar_slat img{
	width: 160px;
    height: 398px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
	}
</style>
<?php
include "header.php";
?> 
	<div class="container">
		<div class="container_bg">
			<div class="container_pad">
						<div class="file-input-wrapper sidebar_slat">
						<?php if($data!='' && $data->sidebar_image!=''){?>
							<div id="uploadPreview"><img id="imgpreview" src="<?php echo $data->sidebar_image;?>" class="btn-file-input"/></div>
						<?}else{?>
						<div id="uploadPreview"><img id="imgpreview" src="images/add.png" class="btn-file-input"/></div>
						<?}?>
							<input type="file" name="sidebar_image" id="sidebar_image"/>
						</div>
				<!--<input type="file" id="sidebar_image" name="sidebar_image"/>-->
				<p id="uploaderr"></p>
				<br>
				<?php if($data!='' && $data->sidebar_image!=''){?>
				<div id="uploadPreview"><!--<img src="<?php //echo $data->sidebar_image;?>"/>--></div>
				<?php }else{?>
				<div id="uploadPreview"></div>
				<?php } ?>
				<button style="float:none;" class="admin_login" onclick="saveDetails();">Update</button>
			</div>
		</div>
	</div>
<?php
include "footer.php";
?> 
<script type="text/javascript">
function readImage(file) {

    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
        image.src    = _file.target.result;              // url.createObjectURL(file);
        image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size/1024) +'KB';
				if(sidebar_image_height==h && sidebar_image_width==w)
				{
				$('#uploaderr').html("");
				$('#uploadPreview').html('<img id="imgpreview" src="'+ this.src +'" class="btn-file-input"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
				}else{
				$('#uploaderr').html("image dimentions (height x width) should be "+sidebar_image_height+" x "+sidebar_image_width);
				}
			
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };      
    };

}
$("#sidebar_image").change(function (e) {
    if(this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
function saveDetails()
{
	if($('#imgpreview').attr('src')!='' && $.trim($('#imgpreview').attr('src'))!=' ')
	{
	var sidebar_image=$('#imgpreview').attr('src');
	$.ajax({
			type		:	'POST',
			url			:  	"process.php",
			dataType	: 	"json",
			data		:	{sidebar_image:sidebar_image},
			success: function(data){
			$("#message").html("Settings successfully updated");
			}
		});
	}
	else{
		alert("Settings successfully updated");
	}
}
</script>
<script type="text/javascript">
function showimagepreview(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#imgprvw-1').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>